<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title></title>
    <link href="libs/weui/weuix.min.css" rel="stylesheet" />
    <link href="libs/swipe/swiper.min.css" rel="stylesheet" />
    <link href="css/common.css" rel="stylesheet"/>
    <link href="css/set.css" rel="stylesheet" />
    <title>实名认证</title>
</head>
<body class="page-bg">
<div class="weui_btn_warn weui-header">
    <div class="weui-header-left"> <a href="javascript:window.history.go(-1);" class="icon icon-109 f-white"></a>  </div>
    <h1 class="weui-header-title">实名认证</h1>
    <div class="weui-header-right">
        <!--<a class="icon icon-22 f-white"></a>-->
    </div>
</div>
<div class="set-box">
    <form id="form">
        <div class="weui_cells weui_cells_form">
            <div class="weui_cell">
                <div class="weui_cell_hd"></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="tel" required="" pattern="" maxlength="11" placeholder="输入您的真实姓名" emptytips="输入您的真实姓名" notmatchtips="请输入正确的姓名">
                </div>
                <div class="weui_cell_ft">
                    <i class="weui_icon_warn"></i>
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_hd"></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="tel" required="" pattern="[0-9]{18}" maxlength="11" placeholder="二代身份证号" emptytips="二代身份证号" notmatchtips="请输入正确的身份证号">
                </div>
                <div class="weui_cell_ft">
                    <i class="weui_icon_warn"></i>
                </div>
            </div>
            <div class="weui_cell">
                <ul class="weui_uploader_files">
                    <li class="weui_uploader_file">

                    </li>
                </ul>
                <div class="weui_uploader_input_wrp">
                    <input class="weui_uploader_input" type="file" accept="image/*" multiple="" />
                    <span class="txt">身份证正面</span>
                </div>
                <div class="weui_uploader_input_wrp">
                    <input class="weui_uploader_input" type="file" accept="image/*" multiple="" />
                    <span class="txt">身份证反面</span>
                </div>
            </div>
            <div class="weui_cell">
                <div class="uploader-tips">
                    <p>请上传本人手持身份证的照片，并确保脸部与证件上的身份信息清晰可见。<a id="example" href="javascript:;">(示例)</a> </p>
                </div>
            </div>
        </div>
        <div class="weui_btn_area">
            <a id="formSubmitBtn" href="javascript:" class="weui_btn weui_btn_red">提交</a>
        </div>
    </form>
    <div class="weui-gallery" style="display:none">
        <span class="weui-gallery-img" style="background-image:url('imgs/example.png');"></span>
        <div class="weui-gallery-opr">
            <a href="javascript:" class="weui-gallery-del" onclick="$('.weui-gallery').fadeOut();">
                <i class="icon icon-95 f-gray"></i>
            </a>
        </div>
    </div>
</div>
</body>

<script type="text/javascript" src="libs/zepto/zepto.min.js"></script>
<script>
    $(function(){
        $('#example').on('click',function(){
            $('.weui-gallery').fadeIn();
        })
    })
</script>
</html>